<template>
    <div class="carshop">
        <div class="car_top">
            <a href="javascript:history.go(-1)">
                <em><img src="../../images/return.png"></em>
            </a>
            <p>购物车</p>
            <span><u><img src="../../images/more.png"></u></span>			
        </div>
	<div class="car_title">
		<p class="car_ck"><input type="checkbox" name="method" value="plus"></p>
		<i><img src="../../images/store_b.png"></i>
		<span>工厂直供淘库自营旗舰店</span>
	</div>   
    <div class="car_con">
        <ul class="car_ul">
            <li>
                <p class="car_ck"><input type="checkbox" name="method" value="plus" id="aa"></p>
                <em><img src="/data/images/more_1.jpg"></em>
                <div class="price">
                    <span>
                        <u>电热水龙头即热式速热电加热自来水厨房电热水器免安装快家用厨房快热</u>
                        <b><img src="../../images/del_b.png"></b>
                    </span>
                    
                    <b>￥169.00</b>
                    <p class="num">
                        <span class="del" @click="del($event)">-</span>
                        <span class="n">{{n}}</span>
                        <span class="add($event)" @click="add">+</span>
                    </p>
                </div>
            </li>
            <li>
                <p class="car_ck"><input type="checkbox" name="method" value="plus"></p>
                <em><img src="/data/images/more_2.jpg"></em>
                <div class="price">
                    <span>
                        <u>电热水龙头即热式速热电加热自来水厨房电热水器免安装快家用厨房快热</u>
                        <b><img src="../../images/del_b.png"></b>
                    </span>
                    
                    <b>￥131.00</b>
                    <p class="num">
                        <span class="del" @click="del1($event)">-</span>
                        <span class="n">{{m}}</span>
                        <span class="add" @click="add1($event)">+</span>
                    </p>
                </div>
            </li>
        </ul>
    </div>
    <div class="car_bottom">
		<p class="car_ck"><input type="checkbox" name="method" value="plus" id="aaa"></p>
		<u>确定信息</u>
        <span>合计总金额:<b>{{sum}}</b></span>    
        
	</div> 
    </div>
</template>
<script>
    export default{
        data(){
            return{
               n:1,
               m:1,
               sum:300
               
            }           
        },
        methods:{
            del(e){
                this.n--;
                console.log( e.currentTarget.nextElementSibling.innerHTML);
                if(this.n<0){
                    this.n=0
                }
                let a=this.n
                let b=this.m
                this.sum=a*169.00+b*131.00;
                
            },
            add(e){
                this.n++;
                console.log(e.currentTarget.previousElementSibling.innerHTML);
                 let a=this.n
                let b=this.m
                this.sum=a*169.00+b*131.00;
            },
             del1(){
                this.m--;
                 if(this.m<0){
                    this.m=0
                }
                 let a=this.n
                let b=this.m
                this.sum=a*169.00+b*131.00;
            },
            add1(){
                this.m++; 
                
                let a=this.n
                let b=this.m
                this.sum=a*169.00+b*131.00;               
            }
        }

    }
</script>
<style>
.carshop{
    width:100%;
    background:#EEE;
    height:100vh;
}
/*头部导航栏*/
    .car_top{
		height: 2.2rem;
        width: 100%;
        position: fixed;
        top: 0px;
        display: flex;
        justify-content: space-between;
        padding: 5px 0px;
        font-size: 1.1rem;
        text-align: center;
        background:#F7F7F7;
        z-index: 1;
	}
	.car_top>a{
        width: 3.5rem;
        line-height: 1rem;
        color: black;
        display: block;
        display: flex;
        align-items: center;
	}
	.car_top>a>em{
		width: 1rem;
		height: 1rem;
        margin-left:20px;
		display: block;
	}
	.car_top>a>em>img{
		width: 100%;
		height: 100%;
	}
	.car_top>p{
        width: 70%;
        display: block;
        text-align:center;
        line-height:2.2rem;
        border: none;
        color:black;
	}
    .car_top>span>u{
		width: 1.4rem;
		height: 1.5rem;
        margin-top:0.2rem;
        margin-right:20px;
		display: block;
        opacity:0.6;
	}
    .car_top>span>u>img{
        width: 100%;
        height: 100%;
	}
/*购物车的内容*/
    .car_title{
        width: 100%;
        border-bottom: 1px solid #EEE;
        display: flex;
        padding: 0.8rem 20px;
        margin-top: 2.9rem;
        flex-flow: wrap;
        background: white;
    }
    .car_ck{
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
        overflow: hidden;
    }
    input[type=checkbox] {
        margin-right: 5px;
        cursor: pointer;
        font-size: 1rem;
        width: 1rem;
        height: 1.5rem;
        position: relative;
    }
    input[type=checkbox]{
        background-color: #F5F5F5;
    }

    input[type=checkbox]:after {
        position: absolute;
        width: 1rem;
        height: 1rem;
        top: 0;
        content: " ";
        background-color: #F5F5F5;
        color: #fff;
        display: inline-block;
        visibility: visible;
    }

    input[type=checkbox]:checked:after {
        content: "✓";
        font-size: 1rem;
        line-height: 1rem;
        text-align: center;
        background-color: #ED5564; 
    }
    .car_title>i{
        width: 1rem;
        height: 1rem;
        display: block;
        margin: 0 0.5rem;
    }
    .car_title>i img{
        width:100%;
        height:100%;
    }
    .car_title>span{
        font-size: 1rem;
        line-height: 1rem;
    }
/*car主体内容*/
    .carshop .car_ul{
    	width: 100%;
    	padding:0rem 20px;
    	
    	background: white;
    }
	.car_ul>li{
        width: 100%;
        border-bottom: 1px solid #EEE;
        height: 6rem;
	}
	.car_ul>li>p{
        position: relative;
        display: block;
        float: left;
        top: 50%;
        margin-top: -0.5rem;
	}
	.car_ul>li>em{
        width: 4rem;
        height: 4rem;
        border: 1px solid #EEE;
        border-radius: 3px;
        display: block;
        position: relative;
        top: 50%;
        margin: 0 0.5rem;
        float: left;
        margin-top: -2rem;
	}
	.car_ul>li>em img{
		width: 100%;
		height: 100%;
	}
  	.car_ul .price{
        height: 6rem;
        width: 66%;
        float: left;
	}
	.car_ul>li>.price>span{
        height: 2rem;
        width: 100%;
        display:block;
        overflow:hidden;
        padding: 1rem 0;
	}
	.car_ul>li>.price>span>u{
        text-decoration: none;
        display: block;
        font-size: 1rem;
        overflow: hidden;
        line-height: 1rem;
        height:100%;
        float: left;
        width: 90%;
	}
	.car_ul>li>.price>span>b{
        width: 1rem;
        height: 1rem;
        display: block;
        float: right;
	}
    .car_ul>li>.price>span>b img{
        width:100%;
        height:100%;
    }

	.car_ul .price>b{
        color: #ED5564;
        font-size: 1rem;
        line-height: 1rem;
        height: 1rem;
        float: left;
	}
    .car_ul .price>b img{
        width:100%;
        height:100%;
    }
	.car_ul .price .num{
        border: 1px solid gray;
        border-radius: 3px;
        display: block;
        float: right;
        opacity: 0.5;
	}

	.car_ul .price .num>span{
        width: 1.5rem;
        height: 1.5rem;
        display: block;
        text-align: center;
        font-size: 1rem;
        line-height: 1.5rem;
        background: #EEE;
        float: left;
	}
    .car_ul .price .num>.n{
		border-left: 1px solid gray;
		border-right: 1px solid gray;
        background:white;
    }
/*最底部分内容*/
.car_bottom{
    width:100%;
    height:3rem;
    background:white;
    position:fixed;
    bottom:0px;
    padding:0 20px;
}
.car_bottom .car_ck{
    float:left;
    position:relative;
    top:50%;
    margin-top:-0.5rem;
}
.car_bottom>span{
    width:60%;
    height:3rem;
    font-size:1rem;
    line-height:3rem;
    text-align:center;
    display:block;
    float:right;
}
.car_bottom>span>b{
    color:red;
    font-size:1.5rem;
}
.car_bottom>u{
    width:5rem;
    height:3rem;
    display:block;
    background:#ED5564;
    color:white;
    font-size:1.2rem;
    text-align:center;
    line-height:3rem;
    text-decoration:none;
    float:right;
    margin-right:20px;
}
</style>

